<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航栏</title>
		<style type="text/css">
			*{list-style: none;text-decoration: none;}
			.ul1
			{
				float: left; 
				height: 30px;
				width: 600px;
				margin-top: -95px;
				margin-left:700px;
				clear: both;
			}
			.ul1 li
			{
				height: 30px;
				width: 80px;
				line-height: 30px;
				float: left;
			}
			.nav
			{
				margin: 0 auto;
				width: 1200px;
				height: 100px;
				background: url(img/h_bg.jpg) no-repeat ;
				background-size:1200px 120px ;
				position: absolute;
				margin-left: 150px;
			}
			#pp
			{
				position: relative;
				margin-top: 50px;
				margin-left: 827px;
			}
			.log
			{
				height: 100px;
			}
			.log img
			{
				opacity: 0.1;
				z-index: 1;
				height: 100px;
			}
			.ul2
			{
				width: 1000px;
				position: absolute;
				margin-top: 57px;
				margin-left: 180px;
			}
			.ul2 li
			{
				width: 80px;
				height: 30px;
				float: left;
				line-height:30px ;
			}
			#contentfelt
			{
				height: 250px;
				width: 250px;
				
				margin: 0;
				margin-left: 190px;
			}
			.sp
			{
				display: block;
				width: 165px;
				float: left;
				margin-top: 100px;
			}
			.sp1
			{
				display: block;
				width: 80px;
				float: left;
				margin-top: 100px;
			}
			.sp2
			{
				
				display: block;
				float: left;
				width: 176px;
			}
			.sp3
			{
				display: block;
				float: left;
				width: 68px;
			}
			.sp4
			{
				
				display: block;
				float: left;
				width: 176px;
			}
			.sp5
			{
				display: block;
				float: left;
				width: 68px;
			}
			#sp6
			{
				display: block;
				width: 191px;
				height: 80px;
				float: right;
				line-height: 80px;
				margin: 0;
				text-align: center;
				
			}
			.h1
			{
				display: block;
				height: 40px;
				line-height: 40px;
				float: left;
				
			}
			.ul3
			{
				padding: 0;
				margin: 0;
				width: 240px;
				height: 200px;
				clear: both;
			}
			.ul3 li
			{
				width: 80px;
				height: 40px;
				line-height: 40px;
				float: left;
			}
			.ul4
			{
				padding: 0;
				margin: 0;
				width: 240px;
				height: 200px;
				clear: both;
			}
			.ul4 li
			{
				width: 80px;
				height: 40px;
				line-height: 40px;
				float: left;
			}
			.ul5
			{
				padding: 0;
				margin: 0;
				width: 240px;
				height: 200px;
				clear: both;
			}
			.ul5 li
			{
				width: 80px;
				height: 40px;
				line-height: 40px;
				float: left;
			}
			.ul6
			{
				padding: 0;
				margin: 0;
				width: 240px;
				height: 200px;
				clear: both;
			}
			.ul6 li
			{
				width: 80px;
				height: 40px;
				line-height: 40px;
				float: left;
			}
			#zuida
			{
				width: 1500px;
				height: 1056px;
				margin: 0 auto;
			}
			#zuida div
			{
				float: left;
			}
			#center
			{
				width: 540px;
				height: 190px;
				margin-top: 110px;
			}
			#img
			{
				width: 560px;
				height: 190px;
			}
			#img1
			{
				width: 560px;
			}
			#right
			{
				margin: 0;
				padding: 0;
				width: 250px;
				height: 800px;
				margin-top: 112px;
				margin-left: 45px;
			}
			#img2
			{
				width: 560px;
			}
			#img2 ul li img 
			{
				
				width: 180px;
				height: 180px;
				border: 1px solid #000000;
			}
			
			#img2 ul
			{
				padding: 0;
				margin: 0;
				width: 560px;
				
			}
			#img2 ul li
			{
				float: left;
				width: 182px;
				margin-left: 4px;
			}
			.span
			{
				display: block;
				text-align: center;
			}
			#right
			{
				width: 300px;
			}
			.rightul
			{
				width: 180px;
				padding: 0;
				float: right;
			}
			.rightimg1
			{
				margin-top: 14px;
				margin-left: 8px;
				width: 100px;
				height: 100px;
			}
			.rightimg2
			{
				clear: both;
				margin-top: 14px;
				margin-left: 25px;
				width: 82px;
				height:80px;
			}
			.main{
				overflow: hidden;
				margin: 0 auto;
				width: 1500px;
				height: 1060px;
			}
			
			.qwe
			{
				height: 500px;
				width: 100%;
				background-color: #6495ED;
				clear: both;
				margin-top: 150px;
			}
			
			/*			底部css  */
			#footer
			{width: 100%; 
			
			
			}
			.div12{margin: 0 auto;width:1000px;}
				.div12 ul {
								width: 1100px;
								margin: 0 auto;
							}
							
						.div12 ul	li {
								margin-left: 10px;
								list-style: none;
								float: left;
							}
							
							.pppp {
								text-align: center;
							}
							
							#imgsss {
								width: 360px;
								margin: 0 auto;
								clear: both;
							}
		</style>
	</head>
	<body>
	<div id="zuida">
		<div id="top">
		<div class="nav">
			<div class="log">
			<img src="img/logo.jpg" />
			</div>
			<ul class="ul1">
				<li style="width: 65px;"><a href="">购物车</a></li>
				<li><a href="">帮助中心</a></li>
				<li><a href="">加入收藏</a></li>
				<li><a href="">设置首页</a></li>
				<li style="width: 50px;"><a href="Login.html"><input type="button" name="name" value="登录"/></a></li>
				<li style="width: 50px;"><a href="register.html"><input type="button" name="zhuce" value="注册"/></a></li>
			</ul>
			<p id="pp">欢迎用户：<span></span>&amp;&amp;！</p>
		</div>
		<div  class="ul2">
			<ul>
				<li><a href="#">首页</a></li>
				<li style="width: 90px;"><a href="#">家用电器</a></li>
				<li style="width: 100px;"><a href="#">手机数码</a></li>
				<li style="width: 110px;"><a href="#">日用百货</a></li>
				<li style="width: 85px;"><a href="#">书籍</a></li>
				<li style="width: 100px;"><a href="#">帮助中心</a></li>
				<li style="width: 100px;"><a href="#">免费开店</a></li>
				<li><a href="#">全球资讯</a></li>
			</ul>
		</div>
		</div>
		<div class="main">
		<div id="contentfelt">
			<span class="sp">商品分类</span>
			<span class="sp1">全部分类</span>
			<h class="h1">家用电器</h>
			<ul class="ul3">
				<li><a href="">大家电</a></li>
				<li><a href="">电热水器</a></li>
				<li><a href="">空调冰箱</a></li>
				<li><a href="">电视附件</a></li>
				<li><a href="">平底锅</a></li>
				<li><a href="">洗衣机</a></li>
				<li><a href="">家庭音响</a></li>
				<li><a href="">冷柜</a></li>
				<li><a href="">点燃气</a></li>
				<li><a href="">电饭煲</a></li>
				<li><a href="">平板电视</a></li>
				<li><a href="">热水器</a></li>
				<li><a href="">DVD</a></li>
				<li><a href="">家电下乡</a></li>
				<li><a href="">摄影机</a></li>
			</ul>
			<h class="h2">书籍</h>
			<ul class="ul4">
				<li><a href="">大家电</a></li>
				<li><a href="">电热水器</a></li>
				<li><a href="">空调冰箱</a></li>
				<li><a href="">电视附件</a></li>
				<li><a href="">平底锅</a></li>
				<li><a href="">洗衣机</a></li>
				<li><a href="">家庭音响</a></li>
				<li><a href="">冷柜</a></li>
				<li><a href="">点燃气</a></li>
				<li><a href="">电饭煲</a></li>
				<li><a href="">平板电视</a></li>
				<li><a href="">热水器</a></li>
				<li><a href="">DVD</a></li>
				<li><a href="">家电下乡</a></li>
				<li><a href="">摄影机</a></li>
			</ul>
			<h class="h2">家用电器</h>
			<ul class="ul5">
				<li><a href="">大家电</a></li>
				<li><a href="">电热水器</a></li>
				<li><a href="">空调冰箱</a></li>
				<li><a href="">电视附件</a></li>
				<li><a href="">平底锅</a></li>
				<li><a href="">洗衣机</a></li>
				<li><a href="">家庭音响</a></li>
				<li><a href="">冷柜</a></li>
				<li><a href="">点燃气</a></li>
				<li><a href="">电饭煲</a></li>
				<li><a href="">平板电视</a></li>
				<li><a href="">热水器</a></li>
				<li><a href="">DVD</a></li>
				<li><a href="">家电下乡</a></li>
				<li><a href="">摄影机</a></li>
			</ul>
			<h class="h2">家用电器</h>
			<ul class="ul6">
				<li><a href="">大家电</a></li>
				<li><a href="">电热水器</a></li>
				<li><a href="">空调冰箱</a></li>
				<li><a href="">电视附件</a></li>
				<li><a href="">平底锅</a></li>
				<li><a href="">洗衣机</a></li>
				<li><a href="">家庭音响</a></li>
				<li><a href="">冷柜</a></li>
				<li><a href="">点燃气</a></li>
				<li><a href="">电饭煲</a></li>
				<li><a href="">平板电视</a></li>
				<li><a href="">热水器</a></li>
				<li><a href="">DVD</a></li>
				<li><a href="">家电下乡</a></li>
				<li><a href="">摄影机</a></li>
			</ul>
		</div>
		<div id="center">
			<img id="img" src="img/ad-01.jpg" />
			<img id="img1" src="img/ree.png"/>
			<div id="img2">
				<ul>
					<li><img src="img/Wancom.jpg" alt="惠普">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					
					<li><img src="img/promote-1.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					
					<li><img src="img/promote-2.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					
					<li><img src="img/promote-3.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>

					<li><img src="img/promote-1.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					<li><img src="img/promote-3.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					<li><img src="img/promote-1.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					<li><img src="img/promote-1.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
					<li><img src="img/promote-1.jpg" alt="">
					<span class="span">惠普商务移动应用英寸笔记本</span>
					</li>
				</ul>
			</div>
		</div>
		<div id="right">
			
			<span class="sp2">公告栏</span>
			<span class="sp3">全部分类</span>
			
			<img class="rightimg1" src="img/yang.png" alt="">
			<ul class="rightul">
				<li>大学生要求老师开网店</li>
				<li>安全锤网上大营销</li>
				<li>商城竟成网购试衣间</li>
				<li>2万网上开十家连锁店</li>
			</ul>
			<span class="sp4">新品上架</span>
			<span class="sp5">全部分类</span>
			<img class="rightimg2" src="img/show1.jpg" alt="">
			<span id="sp6"><a href="">大牌疯狂降价,三折直送。</a></span>
			<img class="rightimg2" src="img/show2.jpg" alt="">
			<span id="sp6"><a href="">大牌疯狂降价</a></span>
			<img class="rightimg2" src="img/show3.jpg" alt="">
			<span id="sp6"><a href="">大牌疯狂降价,暗室逢灯开机按副科级三折直送。</a></span>
			<img class="rightimg2" src="img/show4.jpg" alt="">
			<span id="sp6"><a href="">大牌疯狂降三折直送。</a></span>
			<img src="img/jtdz.png" alt="" style="width: 300px; height: 350px;">
		</div>
		</div>
		
						
		</div>
		<div id="footer">
			<div class="div12">
						<ul>
							<li><a href="#">友情链接:</a></li>
							<li><a href="#">百度</a></li>
							<li><a href="#">Google</a></li>
							<li><a href="#">雅虎</a></li>
							<li><a href="#">淘宝</a></li>
							<li><a href="#">拍拍</a></li>
							<li><a href="#">易趣</a></li>
							<li><a href="#">当当</a></li>
							<li><a href="#">京东商城</a></li>
							<li><a href="#">迅雷</a></li>
							<li><a href="#">新浪</a></li>
							<li><a href="#">网易</a></li>
							<li><a href="#">搜狐</a></li>
							<li><a href="#">猫扑</a></li>
							<li><a href="#">开心网</a></li>
							<li><a href="#">新华网</a></li>
							<li><a href="#">凤凰网</a></li>
						</ul>
					</br>
					</div>
					<hr>
					<div>
						<p class="pppp">COPYRIGHT &copy; 2003-2010 北京市贵关商城有限公司 ALL RIGHT RESERVED</p>
						<p class="pppp">热线：400-66-13060 Email:service@prd.com</p>
						<p class="pppp">ICP: 沪ICP备05021104号</p>
					</div>
					<div id="imgsss">
						<img src=" img/img1.gif" />
						<img src="img/img2.gif" />
						<img src="img/img3.gif" />
						<img src="img/img4.gif" />
					</div>
	</body>

</html>
